<template>
	<a-form :model="form" ref="formRef" :rules="formRules">
		<a-form-item name="userid">
			<a-input autocomplete="off" :placeholder="locale.login.form.userid" v-model:value="form.userid">
				<template #prefix>
					<UserOutlined />
				</template>
			</a-input>
		</a-form-item>
		<a-form-item name="email">
			<a-input autocomplete="off" :placeholder="locale.login.form.email" v-model:value="form.email">
				<template #prefix>
					<MailOutlined />
				</template>
			</a-input>
		</a-form-item>
		<a-form-item name="password">
			<a-input autocomplete="off" :placeholder="locale.login.form.reset" type="password" v-model:value="form.password">
				<template #prefix>
					<LockOutlined />
				</template>
			</a-input>
		</a-form-item>
		<a-form-item name="code">
			<a-input autocomplete="off" :placeholder="locale.login.form.code" v-model:value="form.code">
				<template #prefix>
					<CreditCardOutlined />
				</template>
			</a-input>
			<!-- 验证码 -->
			<VerificationCodeVue ref="verificationCode" class="canvas-code" :width="120" :height="40" />
		</a-form-item>
		<a-form-item>
			<div class="ant-form-item-inline">
				<span class="ant-link" type="info" @click="emit('gotoRegister')" style="margin-left: 0">{{ locale.login.form.gotoRegister }}</span>
				<span class="ant-link" type="primary" style="margin-left: auto" @click="emit('gotoLogin')">{{ locale.login.form.gotoLogin }}</span>
			</div>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" style="width: 100%" @click="reset">{{ locale.login.form.reset }}</a-button>
		</a-form-item>
	</a-form>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { FormInstance } from 'ant-design-vue';
import { useLocale } from '../../../hooks/locale'; // 引入 locale hooks
import { useLoginForm } from '../../../hooks/login-form'; // 引入 login form hooks
import { UserOutlined, MailOutlined } from '@ant-design/icons-vue';
import { LockOutlined, CreditCardOutlined } from '@ant-design/icons-vue';
import VerificationCodeVue from '../../../components/VerificationCode.vue';

const { form, formRules, resetForm, validateForm, setVarificationCode } = useLoginForm();

const { locale }= useLocale();

const emit = defineEmits(['gotoRegister', 'gotoLogin']);

// 表单 dom ref 做表单校验
const formRef = ref<FormInstance>();

// 验证码 dom ref
const verificationCode = ref<InstanceType<typeof VerificationCodeVue>>();

/**
 * 重置密码
 */
async function reset() {
	const validata = await validateForm(formRef);
	console.log('==> validata', validata);
}

onMounted(() => {
	resetForm(formRef);
	setVarificationCode(verificationCode.value);
});
</script>

<style lang="less" scoped>
@import url('../style/common.less');
</style>
